<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%
        String basePath = request.getScheme()+"://"+request.getServerName()+":"
                +request.getServerPort()+request.getContextPath()+"/";
    %>
    <base href="<%=basePath%>">
    <style type="text/css">
        .progress {
            width: 600px;
            height: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 10px 0px;
            overflow:hidden;
        }
        /* 初始状态设置进度条宽度为0px */
        .progress > div {
            width: 10%;
            height: 100%;
            background-color: yellowgreen;
            transition: all .3s ease;
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:"company/findAllComp.action",
                success:function(arr){
                    var str = "";
                    for(var i=0;i<arr.length;i++){
                        str+=' <tr>\n' +
                            '<td>'+arr[i].cname+'</td>\n' +
                            '<td>'+arr[i].location+'</td>\n' +
                            '<td><img width="40px" src="upload/'+arr[i].photoName+'"></td>\n' +
                            '<td><a href="company/downloadPhoto.action?photoName='+arr[i].photoName+
                                                '&photoType='+arr[i].photoType+'">下载图片</a></td>\n' +
                            '<td> <input type="button" value="替换图片" onclick="toUpdatePhoto('+arr[i].cid+',this)"></td>\n' +
                            '</tr>';
                    }
                    $("#tbody1").html(str);
                }
            });
        });

        function toUpdatePhoto(cid,obj){
            $(obj).parent().html('<input id="photo'+cid+'" type="file"> <input type="button" value="提交" ' +
                'onclick="updatePhoto('+cid+')">');
        }

        function  updatePhoto(cid) {
            //获取照片路径
            var photo = $("#photo"+cid)[0].files[0];
            //将数据封装到FormDate中
            var formData = new FormData();
            formData.append("photo",photo);
            formData.append("cid",cid);
            $.ajax({
                type:"POST",
                url:"company/updatePhoto.action",
                data:formData,
                processData:false,//!!!
                contentType:false,//!!!
                xhr: function() {
                    var xhr = new XMLHttpRequest();
                    //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                    xhr.upload.addEventListener('progress', function (e) {
                        //console.log(e);
                        //loaded代表上传了多少
                        //total代表总数为多少
                        var progressRate = (e.loaded / e.total) * 100 + '%';
                        //通过设置进度条的宽度达到效果
                        $('.progress > div').css('width', progressRate);
                    })
                    return xhr;
                },
                success:function(result){
                    if(result=='ok'){
                        alert("替换成功");
                        //刷新页面
                        //location.reload();
                    }else{
                        alert("替换失败");
                    }
                }
            });
        }

    </script>
</head>
<body>
    <table border="1" width="50%">
        <tr>
            <th>公司名称</th>
            <th>公司地址</th>
            <th>公司图片</th>
            <th>下载图片</th>
            <th>替换图片 </th>

        </tr>
        <tbody id="tbody1">

        </tbody>
    </table>
    <div class="progress">
        <div></div>
    </div>
</body>
</html>
